<template>
  <view class="sign page">
    <comHead  :datas="datasObj">
      <template #headerContent>
        <view class="sign_header">
          <view class="head flex-bwt mt-30">
            <text class="ft1 ml-30">积分总计</text>
            <view class="rules">
              <text class="ft c-99" @click="show = true">积分说明 | </text>
              <text class="ft c-99" @click="goPage('/subpackage/integral/integralShopping')"> 积分兑换 | </text>
              <text class="ft c-99" @click="goPage('/subpackage/integral/integralMoreList')">积分明细</text>

              <!-- <image class="wh-22 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image> -->
            </view>
          </view>
          <view class="price">
            <text>{{ signData.total_integral_format }}</text>
            <text class="ft-red ml-20">={{ signData.total_integral_exchange
            }}</text>
          </view>
          <view class="card2 pd-20">
            <view class="flex-bwt">
              <view class="left">
                <view class="ft1">{{ "已连续签到" + signData.keep_sign_day + "天" }}</view>
                <view class="ft mt-8 c-99">明日签到可得 <text class="c-9c fw-800"> {{ signData.tomorrow_integral }}</text> 积分
                </view>
              </view>
              <view class="right">
                <image class="img wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/msg_bg.png"></image>
                <view class="wenzi ft fw-800">连续签到7天可+{{ signData.sub_total_integral }}</view>
              </view>
            </view>
            <view class="qiandao mt-20 flex">
              <view class="mr-8" v-for="(item, index) in signData.sign_list" :key="index">
                <view class="last_item" v-if="index === 6">

                  <image class="img" src="https://cdn.oss.bon-top.cn/static_bc/images/gift.png"></image>
                  <text class="ft c-dbf fw-400 mt-10">+{{ item.integral }}</text>

                </view>
                <view class="sign_item" :class="item.is_sign == 1 ? 'sign_item_active' : ''" v-else>
                  <image v-if="item.is_sign === 1" class="wh-32"
                    src="https://cdn.oss.bon-top.cn/static_bc/images/signed.png">
                  </image>
                  <image v-else class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/nosigned.png"></image>
                  <text class="ft fw-400 mt-10">+{{ item.integral }}</text>
                </view>

              </view>

            </view>
            <view class="date mt-20 flex">
              <view class="ft riqi mr-8" v-for="(item, index) in signData.sign_list" :key="index">
                <text :style="{ fontWeight: item.name == '今天' ? 800 : 400 }">{{ item.name }}</text>
              </view>
            </view>
            <view class="step mt-10 flex-bwt">
              <view class="flex-center" v-for="(item, index) in signData.sign_list" :key="index" style="flex: 1;">
                <view v-if="index === 6" style="width: 100%;text-align: left;">
                  <image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/jiantou.png"></image>
                </view>
                <view class="flex" style="flex: 1;" v-else>
                  <view class="step_item flex-center fs0" v-if="item.is_sign === 1"><span class="yuan"></span> </view>
                  <view class="step_item1" v-else></view>
                  <text style="flex: 1;height: 2rpx;background: #333;"
                    v-if="signData.sign_list[index + 1].is_sign === 1"></text>
                  <text style="flex: 1;height: 2rpx;background: #D1D1D1;" v-else></text>
                </view>
              </view>
            </view>
            <view v-if="signData.is_can_sign === 1" class="signing auto mt-20 c-dbf  ft fw-800 flex-center "
              @click="signing">
              立即签到</view>
            <view v-else class="signing1 auto mt-20 c-99  ft fw-800 flex-center ">明天再来</view>
            <view v-if="signData.is_can_sign === 0" class="posIcon">
              <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/bigSign.png" mode="aspectFill">
              </image>
            </view>
          </view>
        </view>
      </template>
    </comHead>
    <view class="taskList mt-30 auto pd-20">
      <view class="flex-bwt">
        <view class="zuo">
          <view class="ft1">每日任务</view>
          <view class="ft mt-12 c-99">完成任务获取相应的奖励</view>
        </view>
        <view @click="show = true" class="you" style="text-align: right;">
          <view class="ft c-99">任务说明
            <image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image>
          </view>
          <view class="ft mt-12 c-66">今日任务积分<text class="c-9c fw-800 ml-4">+{{ signData.today_task_integral }}</text>
          </view>
        </view>
      </view>
      <view class="card3 mt-20 flex-bwt pd-20" v-for="(item, index) in signData.today_task_list" :key="item.id">
        <view class="zuo">
          <view class="ft fw-800 c-33">{{ item.name + " (" + item.finish_num + "/" + item.limit_num + ")" }}</view>
          <view class="ft mt-10 c-99">1次/+{{ item.integral }}积分</view>
        </view>
        <view v-if="item.is_finish === 0" class="you flex-center ft c-33" @click="toDotask(item.code)">{{
          item.name.includes('分享') ? '去分享' : '去完成' }}</view>
        <view v-else class="you1 flex-center ft c-99">已完成</view>
      </view>

    </view>
    <view class="taskList mt-30 auto pd-20">
      <view class="flex-bwt">
        <view class="zuo">
          <view class="ft1">固定任务</view>
          <view class="ft mt-12 c-99">完成任务获取相应的奖励</view>
        </view>
      </view>
      <view class="card3 mt-20 flex-bwt pd-20" v-for="(item, index) in signData.fixed_task_list" :key="item.id">
        <view class="zuo">
          <view class="ft fw-800 c-33">{{ item.name + "(" + item.finish_num + "/" + item.limit_num + ")" }}</view>
          <view class="ft mt-10 c-99">1次/+{{ item.integral }}积分</view>
        </view>
        <view v-if="item.is_finish === 0" class="you flex-center ft c-33" @click="toDotask(item.code)">去完成</view>
        <view v-else class="you1 flex-center ft c-99">已完成</view>
      </view>
    </view>
    <view style="height: 88rpx;"></view>
    <up-modal width="520rpx" :show="show" :title="title">
      <view class="slot-content">
        <view class="ner pd-20">
          <view class="ft1">分享后朋友打开</view>
          <view class="ft mt-10 c-66">分享内容项目，视频，老师，直播，国家介绍，资讯，课堂时，微信朋友打开查看后，为完成1次任务。</view>
          <view class="ft1 mt-10">分享后朋友注册</view>
          <view class="ft mt-10 c-66">分享内容项目，视频，老师，直播，国家介绍，资讯，课堂时，微信朋友打开查看后，为完成1次任务。</view>
          <view class="ft1 mt-10">评论或问答</view>
          <view class="ft mt-10 c-66">在项目，视频，模块内参与评论或问答1次后，为完成1次任务。</view>
          <view class="ft1 mt-10">点赞</view>
          <view class="ft mt-10 c-66">在视频，老师，直播，国家介绍，资讯，课堂内点赞后，为完成1次任务。</view>

        </view>

      </view>
      <template #confirmButton>
        <view @click="show = false" class="btn1 auto flex-center ft c-dbf">知道了</view>
      </template>
    </up-modal>
  </view>
</template>

<script lang="js" setup>
import { ref, reactive } from "vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { onLoad } from "@dcloudio/uni-app";
import comHead from '@/components/comHead.vue'

// 使用 ref 创建响应式数据  
const show = ref(false);
const title = ref('每日任务说明');
let datasObj = reactive({
  title: '每日签到',
  img: 'https://cdn.oss.bon-top.cn/static_bc/images/head_bg.png',
  color: `#fff`,
  isColor: true,
  direction: '',
  scrollTop: 0,
  height: 532,
  backisImg: true,//导航文字模块的背景图
  headerisImg: true,//整个huader模块的背景图
  fullImag: false,//header是否显示完整的图片
})

const goBack = () => {
  uni.navigateBack(-1)
}
const goPage = (url) => {
  uni.navigateTo({ url: url })
}

const signing = () => {
  utils.request(api.sign, {

  }, 'get').then((res) => {

    if (res.code === 200) {
      getSignData()
    }
  })
}

const toDotask = (code) => {

  console.log('跳转', code)
  if (code === 'perfectInfo') {
    uni.reLaunch({
      url: `/pages/mine/mine`
    })
  } else {
    uni.reLaunch({
      url: `/pages/cart/cart`
    })
  }

}


const signData = ref({})
const getSignData = () => {
  utils.request(api.signIndex, {

  }, 'get').then((res) => {

    signData.value = res.data.info;
  })
}

onLoad(() => {
  getSignData()
})
</script>
<style lang="scss" scoped>
// ::v-deep(.u-modal){
//    width: 270rpx !important;
// }
.ner {
  width: 458rpx;
  height: 622rpx;
  background: #F8F8F8;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.sign {
  // border: 2rpx solid red;
  height: 100%;

  .btn1 {
    width: 278rpx;
    height: 80rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .sign_header {
    position: relative;
    height: 620rpx;
    box-sizing: border-box;
    // background-color: red;

    .head {}

    .price {
      font-family: DIN COROS, DIN COROS;
      font-weight: 900;
      font-size: 56rpx;
      color: #333333;
      padding-left: 30rpx;

      .ft-red {
        font-weight: 800;
        font-size: 24rpx;
        color: #9c0000;
      }
    }

    .navbar {
      width: 60%;
      position: absolute;
      // top: 88rpx;
    }

    .icon {
      width: 28rpx;
      height: 48rpx;
      margin-left: 30rpx;
    }



    .card2 {
      // width: 100%;
      height: 454rpx;
      background: #ffffff;
      border-radius: 40rpx 40rpx 0 0;
      margin: 20rpx 30rpx 0;
      box-sizing: border-box;
      position: relative;

      // border: #9c0000 2rpx solid;
      .posIcon {
        width: 158rpx;
        height: 142rpx;
        position: absolute;
        bottom: 0rpx;
        right: 60rpx;
      }

      .right {
        width: 256rpx;
        height: 74rpx;
        position: relative;

        .wenzi {
          position: absolute;
          top: 12rpx;
          left: 12rpx;
        }
      }

      .qiandao {
        .sign_item {
          width: 84rpx;
          height: 116rpx;
          background: #ffffff;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          border: 2rpx solid #F1F1F1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .sign_item_active {
          background: #fbffdf;
          border: 2rpx solid #333333;

        }

        .last_item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 84rpx;
          height: 116rpx;
          background: #333333;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          border: 2rpx solid #dbf046;

          .img {
            width: 44rpx;
            height: 38rpx;
          }
        }
      }

      .riqi {
        width: 84rpx;
        // border: 2rpx solid red;
        text-align: center;
      }

      .step {
        padding-left: 32rpx;
        position: relative;
      }

      .step_item {
        width: 12rpx;
        height: 12rpx;
        background: #333;
        border-radius: 50%;


        .yuan {
          display: inline-block;
          width: 8rpx;
          height: 8rpx;
          background: #dbf046;


        }

      }

      .step_item1 {
        width: 12rpx;
        height: 12rpx;
        background: #D1D1D1;
        border-radius: 50%;
      }

      .signing {
        width: 448rpx;
        height: 78rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .signing1 {
        width: 448rpx;
        height: 78rpx;
        background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }

    .rules {
      width: 368rpx;
      height: 52rpx;
      background: #ffffff;
      line-height: 52rpx;
      border-radius: 40rpx 0rpx 0rpx 40rpx;
      opacity: 0.5;
      padding-left: 20rpx;
    }
  }

  .taskList {
    width: 690rpx;
    // height: 668rpx;
    background: #F8F8F8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .card3 {
      width: 650rpx;
      height: 116rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .you {
        width: 112rpx;
        height: 54rpx;
        background: #DBF046;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

      .you1 {
        width: 112rpx;
        height: 54rpx;
        background: #F8F8F8;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }

    }
  }
}
</style>
